<template>
	<div>
		<div class="smp-search smp_panel">
			<div class="smp_panel_header">
				<div class="smp_panel_pre"></div>
				<div class="smp_panel_title">服务详情</div>
			</div>
			<div class="smp_panel_body_NopaddingTop">

				<div class="smp-search smp_panel_1">
					<div class="smp_panel_header">
						<div class="smp_panel_pre"></div>
						<div class="smp_panel_title">服务信息</div>
					</div>
					<div class=" smp_panel_body">
						<el-descriptions size="mini" :column="4" border>
							<el-descriptions-item label="交易名称">
								{{row.transName}}
							</el-descriptions-item>
							<el-descriptions-item label="交易码">
								{{row.transCode}}
							</el-descriptions-item>
							<el-descriptions-item label="创建时间">
								{{row.createTime}}
							</el-descriptions-item>
							<el-descriptions-item label="服务状态">
								{{row.status|dictName("SMP0002")}}
							</el-descriptions-item>
							<el-descriptions-item label="系统名称">
								{{row.systemNo|getSystemName}}
							</el-descriptions-item>
							<el-descriptions-item label="系统编号">
								{{row.systemNo}}
							</el-descriptions-item>
							<el-descriptions-item label="所属机构">
								{{row.systemNo|getOrgNameBySystemNo}}
							</el-descriptions-item>
							<el-descriptions-item label="关联需求">
								{{row.qmsNo}}
							</el-descriptions-item>

							<el-descriptions-item label="报文协议">
								{{row.msgAgreement}}
							</el-descriptions-item>
							<el-descriptions-item label="报文编码">
								{{row.msgCode|dictName("SMP0004")}}
							</el-descriptions-item>
							<el-descriptions-item label="http请求方法">
								{{row.httpMethed}}
							</el-descriptions-item>

							<el-descriptions-item label="服务编码">
								{{row.busCode}}
							</el-descriptions-item>

							<el-descriptions-item label="申请人">
								{{row.proposer|getUserChinesName}}
							</el-descriptions-item>

							<el-descriptions-item label="申请时间">
								{{row.applicationTime}}
							</el-descriptions-item>

							<el-descriptions-item label="开发人" :span="2">
								{{row.developer|getUserChinesName}}
							</el-descriptions-item>
							<el-descriptions-item label="测试URL"  :span="4">
								{{row.testAddr}}
							</el-descriptions-item>
							<el-descriptions-item label="功能简介"  :span="4">
								{{row.funIntr}}
							</el-descriptions-item>

							<!-- <el-descriptions-item label="生产URL">
								{{row.prodAddr}}
							</el-descriptions-item> -->

							<!-- <el-descriptions-item label="业务路由">
								{{row.busPath}}
							</el-descriptions-item> -->

						</el-descriptions>

					</div>
				</div>

				<div class="smp-search smp_panel_1">
					<div class="smp_panel_header">
						<div class="smp_panel_pre"></div>
						<div class="smp_panel_title">字段信息</div>
					</div>
					<div class="smp_panel_body innerTabs_1">
						<el-tabs>
							<el-tab-pane label="请求字段">

								<el-table class="fieldList"
									:data="requestFieldList.slice((requestFieldCurrentPage-1)*requestFieldPageSize,requestFieldCurrentPage*requestFieldPageSize)"
									size="mini" stripe style="width: 100%">

									<el-table-column prop="orderNumber" label="序号" width="60" align="center">
									</el-table-column>
									<el-table-column prop="fieldCode" label="字段代码" align="center"></el-table-column>
									<el-table-column prop="fieldName" label="字段名称" align="center"></el-table-column>
									<el-table-column prop="parentType" label="父节点" align="center"></el-table-column>

									<el-table-column prop="nodeType" label="节点类型" align="center">
										<template slot-scope="scope">
											{{scope.row.nodeType|dictName("SMP0017")}}
										</template>
									</el-table-column>

									<el-table-column prop="fieldType" label="字段类型" align="center">
										<template slot-scope="scope">
											{{scope.row.fieldType|dictName("SMP0018")}}
										</template>
									</el-table-column>

									<el-table-column prop="fieldLength" label="长度" width="60" align="center">
									</el-table-column>
									<el-table-column prop="fieldRequire" label="是否必输" width="80" align="center">
										<template slot-scope="scope">
											{{scope.row.fieldRequire|dictName("SMP0015")}}
										</template>
									</el-table-column>

									<el-table-column prop="struct" label="报文结构" align="center">
										<template slot-scope="scope">
											{{scope.row.struct|dictName("SMP0019")}}
										</template>
									</el-table-column>

									<!-- <el-table-column prop="inOut" width="80" label="输入/输出" align="center">
								 <template slot-scope="scope">
									{{scope.row.inOut|dictName("SMP0020")}}
								</template> 
							</el-table-column> -->

									<el-table-column prop="fieldEdsc" show-overflow-tooltip label="字段描述" align="center">
									</el-table-column>

								</el-table>

								<div class="smp-pagination">
									<el-pagination background size="medium"
										layout="total,sizes,prev, pager, next,jumper" :page-size="requestFieldPageSize"
										:page-sizes="[5,10,20]" :total="requestFieldList.length"
										:current-page="requestFieldCurrentPage"
										@current-change="requestFieldCurrentChange"
										@size-change="requestFieldSizeChange">
									</el-pagination>
								</div>

							</el-tab-pane>

							<el-tab-pane label="响应字段">


								<el-table class="fieldList"
									:data="responseFieldList.slice((responseFieldCurrentPage-1)*responseFieldPageSize,responseFieldCurrentPage*responseFieldPageSize)"
									size="mini" stripe style="width: 100%">

									<el-table-column prop="orderNumber" label="序号" width="60" align="center">
									</el-table-column>
									<el-table-column prop="fieldCode" label="字段代码" align="center"></el-table-column>
									<el-table-column prop="fieldName" label="字段名称" align="center"></el-table-column>
									<el-table-column prop="parentType" label="父节点" align="center"></el-table-column>

									<el-table-column prop="nodeType" label="节点类型" align="center">
										<template slot-scope="scope">
											{{scope.row.nodeType|dictName("SMP0017")}}
										</template>
									</el-table-column>

									<el-table-column prop="fieldType" label="字段类型" align="center">
										<template slot-scope="scope">
											{{scope.row.fieldType|dictName("SMP0018")}}
										</template>
									</el-table-column>

									<el-table-column prop="fieldLength" label="长度" width="60" align="center">
									</el-table-column>
									<el-table-column prop="fieldRequire" label="是否必输" width="80" align="center">
										<template slot-scope="scope">
											{{scope.row.fieldRequire|dictName("SMP0015")}}
										</template>
									</el-table-column>

									<el-table-column prop="struct" label="报文结构" align="center">
										<template slot-scope="scope">
											{{scope.row.struct|dictName("SMP0019")}}
										</template>
									</el-table-column>

									<!-- <el-table-column prop="inOut" width="80" label="输入/输出" align="center">
							 <template slot-scope="scope">
								{{scope.row.inOut|dictName("SMP0020")}}
							</template> 
						</el-table-column> -->

									<el-table-column prop="fieldEdsc" show-overflow-tooltip label="字段描述" align="center">
									</el-table-column>

								</el-table>
								<div class="smp-pagination">
									<el-pagination background size="medium"
										layout="total,sizes,prev, pager, next,jumper" :page-size="responseFieldPageSize"
										:page-sizes="[5,10,20]" :total="responseFieldList.length"
										:current-page="responseFieldCurrentPage"
										@current-change="responseFieldCurrentChange"
										@size-change="responseFieldSizeChange">
									</el-pagination>
								</div>
							</el-tab-pane>
						</el-tabs>
					</div>

				</div>

				<div class="smp-result smp_panel_1">
					<div class="smp_panel_header">
						<div class="smp_panel_pre"></div>
						<div class="smp_panel_title">消费信息</div>
					</div>
					<div class="smp_panel_body">
						<el-table :data="details.smpConsumeLists" size="mini" stripe style="width: 100%">

							<el-table-column prop="pubCode" label="消费编码（P值）" align="center">
							</el-table-column>
							<el-table-column prop="msgAgreement" label="报文协议" align="center">
							</el-table-column>

							<!-- <el-table-column prop="msgCode" label="报文编码" align="center" >
								<template slot-scope="scope">
									{{scope.row.msgCode|dictName("SMP0004")}}
								</template>
							</el-table-column> -->

							<el-table-column prop="esbBusPath" show-overflow-tooltip v-if="vaildPermission('SA0003')"
								label="业务路由" align="center">

							</el-table-column>

							<el-table-column prop="oesbBusPath" show-overflow-tooltip v-if="vaildPermission('SA0003')"
								label="业务路由(外联)" align="center">

							</el-table-column>



							<el-table-column label="操作" v-if="vaildPermission('SA0004')" align="center">
								<template slot-scope="scope">
									<el-link size="mini" type="primary" :underline="false" style="font-size: 12px;"
										@click="edit(scope.$index, scope.row)">修改</el-link>
								</template>
							</el-table-column>

						</el-table>
						<add ref="add" @getInit="getInit" />
						<edit ref="edit" @getInit="getInit" />
					</div>
				</div>


				<div class="smp-result smp_panel_1">
					<div class="smp_panel_header">
						<div class="smp_panel_pre"></div>
						<div class="smp_panel_title">调用列表</div>


						<div class="smp-panel_option" v-if="vaildPermission('SA0004')">
							<el-button @click="addsyscall()" type="primary" plain size="mini">
								<i class="el-icon-circle-plus-outline"></i>
								新增调用
							</el-button>
						</div>
					</div>
					<div class="smp_panel_body">
						<el-table :data="details.pageInfo.list" size="mini" stripe style="width: 100%">

							<el-table-column prop="pubCode" label="消费编码(P值)" align="center" min-width="110">
							</el-table-column>

							<el-table-column prop="systemNo" label="消费系统" align="center" show-overflow-tooltip
								min-width="150">>
								<template slot-scope="scope">
									{{scope.row.systemNo|getSystemName}}({{scope.row.systemNo}})
								</template>
							</el-table-column>

							<!-- <el-table-column prop="systemName" label="消费系统名称" width="300" align="center">
				</el-table-column>
				 -->

							<el-table-column prop="systemOrg" label="所属机构" align="center" show-overflow-tooltip>
								<template slot-scope="scope">
									{{scope.row.systemOrg|getOrgNameByOrgCode}}
								</template>
							</el-table-column>
							<el-table-column prop="msgAgreement" label="报文协议" align="center" min-width="100">
							</el-table-column>

							<el-table-column prop="msgCode" label="报文编码" align="center">
								<template slot-scope="scope">
									{{scope.row.msgCode|dictName("SMP0004")}}
								</template>
							</el-table-column>



							<el-table-column prop="systemResponsibleMan" label="系统负责人" align="center">
								<template slot-scope="scope">
									{{scope.row.systemResponsibleMan|getUserChinesName}}
								</template>
							</el-table-column>

							<el-table-column show-overflow-tooltip prop="proxyPath" min-width="150" label="ESB测试URL"
								align="center">
							</el-table-column>

							<el-table-column show-overflow-tooltip prop="localPath" v-if="vaildPermission('SA0003')"
								min-width="150" label="核心路由" align="center">
							</el-table-column>


							<el-table-column show-overflow-tooltip prop="oesbLocalPath" v-if="vaildPermission('SA0003')"
								min-width="200" label="核心路由(外联)" align="center">
							</el-table-column>

							<el-table-column show-overflow-tooltip prop="associatedRequirement" label="关联需求"
								align="center">
							</el-table-column>

							<el-table-column label="操作"  align="center"  width="150">
								<template slot-scope="scope">
									<el-link v-if="vaildPermission('SA0004')" size="mini" type="primary" :underline="false" style="font-size: 12px;"
										@click="editLocal(scope.$index, scope.row)">修改</el-link>
										<el-divider v-if="vaildPermission('SA0004')" direction="vertical"></el-divider>
										<el-link size="mini" type="primary" :underline="false" style="font-size: 12px;"
										@click="handleService2Json(scope.row)">模拟测试</el-link>
											
								</template>
							</el-table-column>

						</el-table>

						<editLocal ref="editLocal" @getInit="getInit" />

						<addSystemCall ref="addSystemCall" @getInit="getInit" />


						<div class="smp-pagination">
							<el-pagination background size="medium" layout="total,sizes,prev, pager, next,jumper"
								:page-size="query.pageSize" :page-sizes="[10,20,30]" :total="total"
								:current-page="query.pageNum" @current-change="currentChange" @size-change="sizeChange">
							</el-pagination>
						</div>
					</div>
				</div>



				<div class="smp-result smp_panel_1">
					<div class="smp_panel_header">
						<div class="smp_panel_pre"></div>
						<div class="smp_panel_title">历史版本</div>
					</div>
					<div class="smp_panel_body">
						<el-table :data="hisServerList" size="mini" stripe style="width: 100%">

							<!-- <el-table-column prop="工单编号" label="交易名称" align="center" show-overflow-tooltip /> -->
							<el-table-column prop="transName" label="交易名称" align="center" show-overflow-tooltip />
							<el-table-column prop="transCode" label="交易码" align="center" min-width="100" />
							<el-table-column prop="busCode" label="服务编码(R值)" align="center" />
							<el-table-column prop="systemNo" label="所属系统" align="center" show-overflow-tooltip>
								<template slot-scope="scope">
									{{scope.row.systemNo|getSystemName}}({{scope.row.systemNo}})
								</template>
							</el-table-column>
							<el-table-column prop="proposer" label="申请人" align="center" min-width="60">
								<template slot-scope="scope">
									{{scope.row.proposer|getUserChinesName}}
								</template>
							</el-table-column>
							<!-- <el-table-column prop="pubCode" label="服务编码(P)" align="center" show-overflow-tooltip></el-table-column> -->
							<el-table-column prop="qmsNo" label="关联需求" align="center"></el-table-column>
							<el-table-column prop="applicationTime" label="申请时间" align="center" min-width="100" />
							<el-table-column prop="developer" label="开发人员" align="center" min-width="60">
								<template slot-scope="scope">
									{{scope.row.developer|getUserChinesName}}
								</template>
							</el-table-column>
							<el-table-column prop="applyId" label="关联工单" align="center" />
							<!-- <el-table-column prop="status" label="服务状态" align="center" min-width="60">
								<template slot-scope="scope">
									{{scope.row.status|dictName("SMP0002")}}
								</template>
							</el-table-column> -->
							<el-table-column label="操作" align="center" width="150">
								<template slot-scope="scope">
									<el-link size="mini" type="primary" :underline="false" style="font-size: 12px;"
										@click="handleEdit(scope.$index, scope.row)">详情</el-link>

									<el-divider direction="vertical"></el-divider>
									<el-link size="mini" type="primary" :underline="false" style="font-size: 12px;"
										@click="exportSelect(scope.$index, scope.row)">导出</el-link>
									<el-divider direction="vertical"></el-divider>
									<el-link size="mini" type="primary" :underline="false" style="font-size: 12px;"
										@click="versionComparison(scope.$index, scope.row)">版本比较</el-link>
								</template>
							</el-table-column>
						</el-table>

						<hisSmpServer ref="hisSmpServer" />
						<versionField ref="versionField" />

						<div class="smp-pagination">
							<el-pagination background size="medium" layout="total,sizes,prev, pager, next,jumper"
								:page-size="hisServerPageSize" :page-sizes="[5,10,20]" :total="hisServerList.length"
								:current-page="hisServerCurrentPage" @current-change="hisServerCurrentChange"
								@size-change="hisServerSizeChange">
								>
							</el-pagination>
						</div>
					</div>
				</div>



			</div>
		</div>
	</div>
</template>

<script>
	"use strict";
	import {
		getConsumeInfo,
		getServiceInfo,
		getHisByServer,
		exportHisService
	} from '@/api/service.js';
	import {
		getFieldByServer
	} from '@/api/field.js';
	import add from './add';
	import edit from './edit';
	import editLocal from './editLocal';
	import addSystemCall from './addSystemCall';

	import hisSmpServer from './hisSmpServer';
	import versionField from './versionField';
	export default {

		components: {
			add,
			edit,
			editLocal,
			hisSmpServer,
			addSystemCall,
			versionField
		},

		data() {
			return {
				busCode: '',
				transCode: '',
				systemNo: '',
				applyFieldList: [],
				requestFieldList: [],
				responseFieldList: [],
				hisServerList: [],

				row: {

				},
				details: [],
				total: 0,
				total2: 0,
				query: {
					body: {
						busCode: '',
						systemNo: ''
					},
					pageNum: 1,
					pageSize: 10
				},

				//请求字段分页信息
				requestFieldCurrentPage: 1,
				requestFieldPageSize: 5,
				responseFieldCurrentPage: 1,
				responseFieldPageSize: 5,


				hisServerCurrentPage: 1,
				hisServerPageSize: 5,


			};

		},

		created() {
			this.query.body.system = this.$route.query.systemNo;
			this.query.body.systemNo = this.$route.query.systemNo;
			this.query.body.busCode = this.$route.query.busCode;
			this.transCode = this.$route.query.transCode;
			this.systemNo = this.$route.query.systemNo;
			this.getInit();
		},
		methods: {
			versionComparison(index, row) {
				let row2 = {};
				Object.assign(row2, row);
				//let index1 = (this.applyServerListCurrentPage - 1) * this.applyServerListPageSize + index;

				this.$refs.versionField.showDialog2(row2);
			},

			addsyscall() {
				let row1 = {};
				row1.regSysCode = this.row.systemNo;
				row1.transCode = this.row.transCode;
				row1.transName = this.row.transName;
				row1.busCode = this.row.busCode;

				this.$refs.addSystemCall.showDialog(row1);
			},



			requestFieldCurrentChange(val) {

				this.requestFieldCurrentPage = val
			},
			requestFieldSizeChange(val) {
				this.requestFieldCurrentPage = 1
				this.requestFieldPageSize = val
			},

			responseFieldCurrentChange(val) {
				this.responseFieldCurrentPage = val
			},
			responseFieldSizeChange(val) {
				this.responseFieldCurrentPage = 1
				this.responseFieldPageSize = val
			},


			hisServerCurrentChange(val) {

				this.hisServerCurrentPage = val
			},
			hisServerSizeChange(val) {
				this.hisServerCurrentPage = 1
				this.hisServerPageSize = val
			},




			/**
			 * 获取P值得个数
			 * @param {Object} pubCode
			 */
			pubCodeGroup(pubCode) {
				/* details.pageInfo.list */
				return this.details.pageInfo.list.filter((item => item.pubCode == pubCode)).length;
			},
			pubCodeOffset(pubCode) {
				let pubCodeSet = new Set(this.details.pageInfo.list.map(o => o.pubCode));
				let tmp = Array.from(pubCodeSet);

				let index = tmp.indexOf(pubCode);

				let offset = 0;
				for (let i = 0; i < index; i++) {
					offset += this.pubCodeGroup(tmp[i]);
				}
				return offset;
			},

			spanMethod(data) {

				const {
					row,
					column,
					rowIndex,
					columnIndex
				} = data;

				if (columnIndex == 0) {
					let len = this.pubCodeGroup(row.pubCode);

					let lenName = this.pubCodeOffset(row.pubCode);

					if (rowIndex == lenName) {
						return {
							rowspan: len,
							colspan: 1
						}
					} else {
						return {
							rowspan: 0,
							colspan: 0
						}
					}
				} else {
					return {
						rowspan: 1,
						colspan: 1
					}
				}
			},
			currentChange(val) {
				this.query.pageNum = val;
				this.getInit();
			},

			sizeChange(val) {
				this.query.pageSize = val;
				this.query.pageNum = 1;
				this.getInit();
			},

			getInit() {

				getConsumeInfo(this.query).then(response => {
					this.details = response.data.extend;
					this.total = response.data.extend.pageInfo.total;


				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				});

				getServiceInfo({
					"busCode": this.query.body.busCode,
					"systemNo": this.query.body.systemNo
				}).then(response => {
					this.row = response.data.extend;
					this.transCode = this.row.transCode,
						this.$store.commit('SET_SUBTITLE', "--" + this.row.transName);
					//this.total = response.data.extend.total;

				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				});

				getFieldByServer({
					"transCode": this.transCode,
					"systemNo": this.systemNo
				}).then(response => {
					this.applyFieldList = response.data.extend.list

					this.requestFieldList = this.applyFieldList.filter(item => item.inOut == '01');
					this.responseFieldList = this.applyFieldList.filter(item => item.inOut == '02');

				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				});

				//查询历史服务表
				getHisByServer(this.query).then(response => {
					this.hisServerList = response.data.extend.list;
					this.total2 = response.data.extend.pageInfo.total;
				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				});



			},

			add(index, row) {
				this.$refs.add.showDialog(row.pubCode);
			},

			edit(index, row) {
				let row1 = {};
				Object.assign(row1, row);
				this.$refs.edit.showDialog(row1);
			},

			editLocal(index, row) {
				let row1 = {};
				Object.assign(row1, row);
				row1.regSysCode = this.row.systemNo;
				row1.transCode = this.row.transCode;
				row1.transName = this.row.transName;
				row1.busCode = this.row.busCode;
				this.$refs.editLocal.showDialog(row1);
			},


			handleEdit(index, row) {
				// let row2 = {};
				// Object.assign(row2, row);
				// let index1 = (this.applyServerListCurrentPage - 1) * this.applyServerListPageSize + index;
				this.$refs.hisSmpServer.showDialog2(row, index);
			},
			
			
			handleService2Json(row){
				row.pubSysCode = row.systemNo;
				row.regSysCode = this.row.systemNo;
				row.transCode = this.row.transCode;
				row.transName = this.row.transName;
				if(row.msgAgreement=='http/json'||row.msgAgreement=='https/json'){
				
						this.$router.push({
							name: 'httpTrans',
							query: Object.assign(row)
						})
					
				}else if(row.msgAgreement=='socket/xml'){
					this.$router.push({
						name: 'transUtil',
						query: Object.assign(row)
					})
				} else{
					this.$message({
						duration:5000,						
						type: 'info',
						message: "适配中...！"
					});
				}
			},


			exportSelect(index, row) {
				exportHisService(row).then(res => {

					let name = row.transCode+".xlsx";
					let file = {
						uid: '-1', // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
						name: row.transCode+".xlsx", // 文件名
						status: 'done', // 状态有：uploading done error removed
					}
					const blob = new Blob([res.data]);
					const blobURL = window.URL.createObjectURL(blob);
					const aLink = document.createElement('a');
					aLink.href = blobURL;
					aLink.setAttribute('download', name);

					if (typeof aLink.download === 'undefined') {
						aLink.setAttribute('target', '_blank');
					}
					aLink.style.display = 'none';
					document.body.appendChild(aLink);
					aLink.click();
					document.body.removeChild(aLink);
					window.URL.revokeObjectURL(blob);
				})
			},

		}

	}
</script>

<style>
	.detailsTitle {
		color: black;
		font-size: 20px;
		text-align: left;
		margin-top: 10px;
		margin-left: 20px;
		margin-bottom: 10PX;
		border-left: 3px solid #090;
		line-height: 24px;
		padding-left: 10px;
		color: #57595d;
	}

	.serviceInfo {
		text-align: left;
		margin-left: 40px;
	}

	.serviceInfo span {
		line-height: 30px;
		text-align: left;
		color: #606266;
		font-size: 14px;
	}

	.el-divider--horizontal {
		margin: 12px 0;
		;
	}
</style>
